<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>挂号管理</title>
    <link href="css/index/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/loginOut.css">
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/payIn.css">
    <script src="lib/js/jquery-1.12.4.js"></script>
    <script src="lib/js/bootstrap.js"></script>
    <script src="js/loginText.js"></script>
</head>

<body>
    <!-- left 侧边栏 start -->
    <header>
        <div class="header_content">
            您好，<span class="actor"></span>！
            <div class="loginOut">
                退出
                <span class="iconfont icon-tuichu"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div id="left">
            <div class="menu">菜单栏</div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <!-- todo -->
            </div>
        </div>
        <!-- left 侧边栏 end -->
        <div class="right">
            <div class="header">门诊挂号</div>
            <div class="right-content">
                <div class="right-content-content">
                    <div style="text-align: left;">
                        <!-- 查询 -->
                        <form class="form-inline my-form" style="margin-bottom: 50px" id="myFormSearch">
                            <div style="display: block;" class="form-group line">
                                <label for="exampleInputName2">请输入身份证号：</label>
                                <input type="text" class="form-control" id="searchNumber" placeholder="输入身份证号">
                            </div>
                            <div style="display: block;" class="form-group  line">
                                <label for="exampleInputName2">请输入病人姓名：</label>
                                <input type="text" class="form-control" id="searchName" placeholder="输入病人姓名">
                            </div>
                            <div style="text-align: center;" class="form-group line"><button type="submit" class="btn btn-primary searchButton">查询</button></div>
                        </form>
                    </div>
                    <!-- 动态显示部分 -->
                    <div class="patient-content">


                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
    <footer>
    </footer>
    <div class="footer_content1">权限管理系统2020</div>
</body>
<!-- 根据身份证号名字查询出来的病人信息  局部显示 -->
<script type="text/template" id="havePatientMessage">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>身份证</th>
                <th>病历号</th>
                <th>婚姻状态</th>
                <th>年龄</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><%=data.name%></td>
                <td><%=data.gender%></td>
                <td><%=data.number%></td>
                <td><%=data.cardNumber%></td>
                <td><%=data.haveFamily%></td>
                <td><%=data.age%></td>
                <td><%=data.tell%></td>
            </tr>
        </tbody>
    </table>
    

    <!-- 模糊查询不到用户的模态框 -->
<div class="modal fade" id="havePatientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel" style="text-align: left">
                病人信息：
            </h4>
        </div>
        <div class="modal-body" style="height: 370px;">
            <form role="form" class="form-inline" id="haveGuaHaoPatientMessage" style="text-align: left">
                <div class="form-group" style="margin:5px">
                    <label>婚姻状况:</label>
                    <input class="form-control" disabled value="<%=data.haveFamily%>">
                </div>
                <div class="form-group" style="margin:5px">
                    <label>性别:</label>
                    <input class="form-control" disabled value="<%=data.gender%>">
                </div>
                <div class="form-group" style="margin:5px">
                    <label>姓名:</label>
                    <input class="form-control" disabled value="<%=data.name%>">
                </div>
                <div class="form-group" style="margin:5px">
                    <label>身份证:</label>
                    <input class="form-control" disabled value="<%=data.number%>">
                </div>

                <div class="form-group" style="margin:5px">
                    <label>卡号:</label>
                    <input class="form-control" disabled value="<%=data.cardNumber%>">
                </div>

                <div class="form-group" style="margin:5px">
                    <label>年龄:</label>
                    <input class="form-control" disabled value="<%=data.age%>">
                </div>

                <div class="form-group" style="margin:5px">
                    <label>电话:</label>
                    <input class="form-control" id=""  disabled value="<%=data.tell%>">
                </div>
            </form>
        </div>

    </div>

</div><!-- /.modal-content -->
</div><!-- /.modal -->


    <form role="form" class="form-inline"  style="text-align: left">
        <div class="form-group" style="margin:5px">
            <label>请选择费别：</label>
            <select id="input" class="form-control payType" required="required" name="payType">
                <option value="自费">自费</option>
                <option value="报销">报销</option>
            </select>
        </div>
        <div class="form-group" style="margin:5px">
            <button class="btn btn-class" type="button" data-toggle="modal" data-target="#havePatientModal">查看病人信息</button>
        </div>
        <br>
        <div class="form-group" style="margin:5px">
            <label>请选择挂号类别：</label>
            <select id="input" class="form-control guaHaoType" required="required" name="guaHaoType">
                <option value="普通号">普通号</option>
                <option value="专家号">专家号</option>
            </select>
        </div>

        <div class="form-group" style="margin:5px">
            <label>请选择科室：</label>
            <select id="input" class="form-control patientClasses" required="required" name="patientClass">
                <option value="儿科">儿科</option>
                <option value="妇科">妇科</option>
                <option value="男科">男科</option>
                <option value="精神科">精神科</option>
                <option value="骨科">骨科</option>
            </select>
        </div>
        <br>
        <div class="form-group" style="margin:5px">
            <label>请选择医生：</label>
            <select id="input" class="form-control doctor" required="required" name="doctor">
                <option value="张三">张三</option>
                <option value="李四">李四</option>
                <option value="王五">王五</option>
            </select>
        </div>

        <div class="form-group" style="margin:5px">
            <label>请选择项目：</label>
            <select id="input" class="form-control program" required="required" name="doctor">
                <option value="挂号">挂号</option>
            </select>
        </div>
        <div class="form-group" style="margin:5px">
            <label>费用:</label>
            <input class="form-control money" id="" placeholder="输入费用" name="money">
        </div>

        <div style="margin-left: 0">
            <button type="submit" class="btn btn-primary" id="addGuaHaoPatient" style="margin:5px" data-toggle="modal" data-target="#payMoney">保存</button>
        </div>
    </form>



</script>


<!-- 模糊查询查到的信息 -->
<script type="text/template" id="nameAndNumber">
    <table class="table table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>身份证号</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <%for(var i = 0; i < data.length; i++) {%>
        <tr>
            <td><%=i+1%></td>
            <td><%=data[i].name%></td>
            <td><%=data[i].number%></td>
            <td><button class="btn btn-primary nameAndNumber" data-name="<%=data[i].name%>" data-number="<%=data[i].number%>">查看</button></td>
        </tr>
        <%}%>
    </tbody>
</table>


</script>



<!-- 模糊查不到用户的局部显示 -->
<script type="text/template" id="noPatient">
    
    <form role="form" class="form-inline"  style="text-align: left">
        <div class="form-group" style="margin:5px">
            <label>请选择费别：</label>
            <select id="input" class="form-control payType" required="required" name="payType">
                <option value="自费">自费</option>
                <option value="报销">报销</option>
            </select>
        </div>
        <div class="form-group" style="margin:5px">
            <button class="btn btn-class" type="button" data-toggle="modal" data-target="#myNewPatientModal">添加病人信息</button>
        </div>
        <br>
        <div class="form-group" style="margin:5px">
            <label>请选择挂号类别：</label>
            <select id="input" class="form-control guaHaoType" required="required" name="guaHaoType">
                <option value="普通号">普通号</option>
                <option value="专家号">专家号</option>
            </select>
        </div>

        <div class="form-group" style="margin:5px">
            <label>请选择科室：</label>
            <select id="input" class="form-control patientClasses" required="required" name="patientClass">
                <option value="儿科">儿科</option>
                <option value="妇科">妇科</option>
                <option value="男科">男科</option>
                <option value="精神科">精神科</option>
                <option value="骨科">骨科</option>
            </select>
        </div>
        <br>
        <div class="form-group" style="margin:5px">
            <label>请选择医生：</label>
            <select id="input" class="form-control doctor" required="required" name="doctor">
                <option value="张三">张三</option>
                <option value="李四">李四</option>
                <option value="王五">王五</option>
            </select>
        </div>

        <div class="form-group" style="margin:5px">
            <label>请选择项目：</label>
            <select id="input" class="form-control program" required="required" name="doctor">
                <option value="挂号">挂号</option>
            </select>
        </div>
        <div class="form-group" style="margin:5px">
            <label>费用:</label>
            <input class="form-control money" id="" placeholder="输入费用" name="money">
        </div>
        <table class="table table-hover  my-hidden-table" style="display: none; margin-top: 20px">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>身份证</th>
                    <th>病历号</th>
                    <th>婚姻状态</th>
                    <th>年龄</th>
                    <th>电话</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="td-name"></td>
                    <td class="td-gender"></td>
                    <td class="td-number"></td>
                    <td class="td-cardNumber"></td>
                    <td class="td-haveFamily"></td>
                    <td class="td-age"></td>
                    <td class="td-tell"></td>
                </tr>
            </tbody>
        </table>
    

        <div style="margin-left: 0">
            <button type="submit" class="btn btn-primary" id="addGuaHaoPatient" style="margin:5px" data-toggle="modal" data-target="#payMoney">保存</button>
        </div>
    </form>

    

</script>

<!-- 挂号缴费模态框 -->
<div class="modal fade" id="payMoney" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    挂号缴费
                </h4>
            </div>
            <div class="modal-body" style="height: 370px;">
                <form role="form" class="form-inline" id="payMoneyForm">
                    <div class="form-group" style="margin:5px">
                        <label>总金额:</label>
                        <input class="form-control totalMoney" id="" placeholder="总金额" name="totalMoney">
                    </div>
                    <div class="form-group" style="margin:5px">
                        <label>自费金额:</label>
                        <input class="form-control selfMoney" id="" placeholder="自费金额" name="selfMoney">
                    </div>
                    <div class="form-group" style="margin:5px">
                        <label>实际金额:</label>
                        <input class="form-control realMoney" id="" placeholder="实际金额" name="reallyMoney">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary payMoney" style="margin:5px">提交</button>
                    </div>
                </form>
            </div>

        </div>

    </div><!-- /.modal-content -->
</div><!-- /.modal -->


<!-- 模糊查询不到用户的模态框 -->
<div class="modal fade" id="myNewPatientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增病人信息
                </h4>
            </div>
            <div class="modal-body" style="height: 370px;">
                <form role="form" class="form-inline" id="addGuaHaoPatientMessage">
                    <div class="form-group" style="margin:5px">
                        <label>请选择婚姻状况：</label>
                        <select id="input" class="form-control haveFamily" required="required" name="haveFamily">
                            <option value="已婚">已婚</option>
                            <option value="未婚">未婚</option>
                        </select>
                    </div>

                    <div class="form-group" style="margin:5px">
                        <label>请选择性别：</label>
                        <select id="input" class="form-control gender" required="required" name="gender">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin:5px">
                        <label>请输入姓名:</label>
                        <input class="form-control name" id="" placeholder="输入姓名" name="name">
                    </div>
                    <div class="form-group" style="margin:5px">
                        <label>请输入身份证:</label>
                        <input class="form-control number" id="" placeholder="输入身份证" name="number">
                    </div>

                    <div class="form-group" style="margin:5px">
                        <label>请输入卡号:</label>
                        <input class="form-control cardNumber1" id="" placeholder="输入卡号" name="cardNumber">
                    </div>

                    <div class="form-group" style="margin:5px">
                        <label>请输入年龄:</label>
                        <input class="form-control age1" id="" placeholder="输入年龄" name="age">
                    </div>

                    <div class="form-group" style="margin:5px">
                        <label>请输入电话:</label>
                        <input class="form-control tell1" id="" placeholder="输入电话" name="tell">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary" style="margin:5px">提交</button>
                    </div>
                </form>
            </div>

        </div>

    </div><!-- /.modal-content -->
</div><!-- /.modal -->





<!-- 左 -->
<script type="text/template" id="myFormData">

    <%for(var i = 0; i < data.length; i++) {%>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                    href="#<%=i+1%>" aria-expanded="false" aria-controls="<%=i+1%>">
                    <span><%=data[i].father%></span>
                </div>
            </h4>
        </div>
        <div id="<%=i+1%>" class="panel-collapse collapse" role="tabpanel"
            aria-labelledby="headingTwo">
            <div class="panel-body" style="color: #337AB7">
                <%for(var j = 0; j < data[i].sun.length; j++) {%>
                    <div style="margin-top: 20px"><a href="<%=data[i].sun[j].url%>"><%=data[i].sun[j].name%></a></div>
                <%}%>
            </div>
        </div>
    </div>
<% } %>

</script>

<script>
    window.onload = function () {


        // 获取当前用户信息
        var actor = JSON.parse(localStorage.getItem('userMessage')).actor
        console.log(actor)

        // 左边菜单栏渲染
        getLeftCategory(function (res) {
            console.log(res)
            $('.panel-group').html(template('myFormData', {
                data: res
            }))
        }, actor)


        // 搜索按钮表单提交事件：
        $("#myFormSearch").submit(function (e) {
            e.preventDefault()
            // 获取表单提交内容
            var number = $('#searchNumber')[0].value.trim()
            var name = $('#searchName')[0].value.trim()
            console.log('输入的身份证号：' + number)
            console.log('输入的名字：' + name)
            if (!number && !name) {
                window.alert('身份证号和姓名不能同时为空！')
                return
            }
            // 向后端发送请求模糊搜索
            $.ajax({
                url: '/pages/patIn/getPatientMoHu',
                type: 'post',
                data: JSON.stringify({
                    number,
                    name
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    console.log('后端返回模糊查询病人:')
                    console.log(res)
                    if (res.error) {
                        // 模糊查询失败直接添加挂号病人
                        window.alert(res.error)
                        $('.patient-content').html(template('noPatient'))
                    } else {
                        // 渲染动态病人信息
                        $('.patient-content').html(template('nameAndNumber', {
                            data: res
                        }))
                    }
                }
            })
        })

        // 新增挂号病人信息按钮绑定事件
        $("#addGuaHaoPatientMessage").submit(function (e) {
            e.preventDefault()
            // 获取表单提交内容
            var haveFamily = $('.haveFamily')[0].value
            var gender = $('.gender')[0].value
            var name = $('.name')[0].value.trim()
            var number = $('.number')[0].value.trim()
            var cardNumber = $('.cardNumber1')[0].value.trim()
            var age = $('.age1')[0].value.trim()
            var tell = $('.tell1')[0].value.trim()
            console.log(haveFamily)
            console.log(gender)
            console.log(name)
            console.log(number)
            console.log(cardNumber)
            console.log(age)
            console.log(tell)
            if (!name) {
                window.alert('姓名不能为空！')
                return
            }
            if (!number) {
                window.alert('身份证不能为空！')
                return
            }
            if (!cardNumber) {
                window.alert('卡号不能为空！')
                return
            }
            if (!age) {
                window.alert('年龄不能为空！')
                return
            }
            if (!tell) {
                window.alert('电话不能为空！')
                return
            }

            // 表格显示
            $('.td-name')[0].innerText = name
            $('.td-gender')[0].innerText = gender
            $('.td-number')[0].innerText = number
            $('.td-cardNumber')[0].innerText = cardNumber
            $('.td-haveFamily')[0].innerText = haveFamily
            $('.td-age')[0].innerText = age
            $('.td-tell')[0].innerText = tell
            console.log($('.my-hidden-table')[0])
            $('.my-hidden-table')[0].style.display = 'block'
            // 把这些信息存本地
            localStorage.setItem('patientMessage', JSON.stringify({
                haveFamily,
                gender,
                name,
                number,
                cardNumber,
                age,
                tell
            }))
            $('#myNewPatientModal').modal('hide')
            // 把信息显示到上面
        })



        // 根据病人身份证号和姓名查询挂号信息的 按钮绑定事件
        $('.patient-content').on('click', '.nameAndNumber', function () {
            var name = this.getAttribute('data-name')
            var number = this.getAttribute('data-number')
            console.log(name)
            console.log(number)
            $.ajax({
                url: '/pages/guaHao/getGuaHaoPatient',
                type: 'post',
                data: JSON.stringify({
                    name,
                    number
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    // 把这个数据存到本地
                    console.log(res)
                    localStorage.setItem('patientMessage', JSON.stringify(res))
                    $('.patient-content').html(template('havePatientMessage', {
                        data: res
                    }))
                }
            })
        })
        // 新增挂号表单保存事件
        $('.patient-content').on('click', '#addGuaHaoPatient', function (e) {
            e.preventDefault()
            console.log(1)
            var payType = $('.payType')[0].value
            var guaHaoType = $('.guaHaoType')[0].value
            var patientClasses = $('.patientClasses')[0].value
            var doctor = $('.doctor')[0].value
            var program = $('.program')[0].value
            var money = $('.money')[0].value
            var patientMessage = JSON.parse(localStorage.getItem('patientMessage'))
            patientMessage.payType = payType
            patientMessage.guaHaoType = guaHaoType
            patientMessage.patientClasses = patientClasses
            patientMessage.doctor = doctor
            patientMessage.programs = program
            patientMessage.money = money
            // 再存进去
            localStorage.setItem('patientMessage', JSON.stringify(patientMessage))
        })

        // 付款的表单提交事件
        $("#payMoneyForm").submit(function (e) {
            e.preventDefault();
            console.log(1)
            var totalMoney = $('.totalMoney')[0].value.trim()
            var realMoney = $('.realMoney')[0].value.trim()
            var selfMoney = $('.selfMoney')[0].value.trim()
            if (!totalMoney) {
                window.alert('总金额不能为空')
                return
            }
            if (!realMoney) {
                window.alert('实际金额不能为空')
                return
            }
            if (!selfMoney) {
                window.alert('自费金额不能为空')
                return
            }
            var patientMessage = JSON.parse(localStorage.getItem('patientMessage'))
            patientMessage.totalMoney = totalMoney
            patientMessage.realMoney = realMoney
            patientMessage.selfMoney = selfMoney
            localStorage.setItem('patientMessage', JSON.stringify(patientMessage))
            console.log('1111111111111')
            console.log(patientMessage)
            // 挂号：
            $.ajax({
                url: 'pages/guaHao/addPatientMessage',
                type: 'post',
                data: JSON.stringify(
                    patientMessage
                ),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    if (res.error) {
                        window.alert(res.error)
                    } else {
                        console.log(res)
                        window.alert('姓名:'+res.name + '、科室：'+res.dept+'、医生：'+res.doctor+'、金额：'+ res.money+'--挂号成功！')
                        self.location = 'guaHao.html'
                    }
                }

            })
        })
    }

    // 根据获取左边菜单栏函数封装
    function getLeftCategory(callback, actor) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategoryByActor',
            type: 'post',
            data: JSON.stringify({
                actor
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }

        })
    }
</script>

<!-- <script src="js/common.js"></script> -->
<script src="lib/js/bootstrap-paginator.js"></script>
<script src="lib/js/template-native.js"></script>


<script src="lib/js/mock.js"></script>
<script src="mock/getCategoryByActor.js"></script>
<script src="mock/guaHao.js"></script>

</html>